<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

body,html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
}

#tabtop {
	line-height: 31px;
	background: url("/admin/templates/images/map_top_bg.png") repeat;
	font-size: 12px;
	color: #343434;
}

#tabtop span {
	float: left;
	line-height: 31px;
	display: block;
}

#tabtop span.dob {
	padding-left: 7px;
}

#tabtop span.dob a {
	background: url("/admin/templates/images/yuncheng_a.png") no-repeat left
		center;
}

#tabtop span.dob a.ok {
	color: #3a3;
}

#tabtop span.dob a.on {
	color: #ef4f4f;
}

#tabtop span a {
	padding: 0 16px 0 8px;
	color: #343434;
	text-decoration: none;
}

#tabtop span.bd a {
	border-right: 1px solid #ccc;
	padding: 0 12px;
}

.position {
	vertical-align: text-bottom;
	margin-right: 5px;
	width: 9px;
}

.warring {
	color: #f00;
	padding: 0 12px;
	font-weight: bold;
}

.warring i {
	font-style: normal;
	float: left;
}

#tabtop span.warring a {
	color: #f00;
	display: block;
	float: left;
}

#allmap {
	width: 100%;
}

.mapli {
	width: 100%;
	cursor: pointer;
	padding: 5px;
}
</style>

<script type="text/javascript">
        //<!CDATA[
        var SITE_URL = "{$site_url}";
        var REAL_SITE_URL = "{$real_site_url}";
        var REAL_BACKEND_URL = "{$real_backend_url}";
        //]]>
    </script>
<script
	src="http://api.map.baidu.com/api?v=2.0&ak=kkA94xvGPjnprY92WU4yYME8"></script>
<script type="text/javascript" src="{lib file=jquery.js}"
	charset="utf-8"></script>
<title>车辆轨迹 - 智云社</title>
</head>
<body class="page">
	<div id="tabtop">
		<span class="bd"> <a href="javascrip:void(0);"
			onclick="markerposition();"><img
				src="templates/images/position.png" class="position" alt="">位置</a>
		</span> <span class="bd"> </span> <span class="bd"> &nbsp;关键字：<input
			type="text" id="txtmapsearch" value="{$address}"
			onkeydown="event.keyCode==13?mapsearch():''" /><a
			href="javascrip:void(0);" onclick="mapsearch()">查询</a>

			&nbsp;&nbsp;&nbsp;&nbsp;位置：<input type="text" id="txtmapresult"
			value="" style="width: 300px"/> <a href="javascrip:void(0);" onclick="markerselect()"><img
				src="templates/images/position.png" class="position" alt="">确认当前位置</a>
		</span> <span class="dob">
			<!--
        运程：
        <a href="javascript:void(0);" class="haul on">1背空箱</a>
        <a href="javascript:void(0);" class="haul">2装箱</a>
        <a href="javascript:void(0);" class="haul">2装箱</a>--> </span> <span
			class="warring">
			<!--
        <i>异常：</i>
        <a href="javascript:void(0);" class="exception">临时加油</a>
        <a href="javascript:void(0);" class="exception">堵车</a>
        <a href="javascript:void(0);" class="exception">车辆抛锚</a>--> </span>
		<div style="clear: both;"></div>
	</div>
	<div id="allmap"></div>
	<div id="r-result"
		style="position: absolute; top: 0px; right: 0px; width: 0px; padding: 5px; display: inline-block; height: 100%; background-color: #EFEFEF; display: none;"></div>
</body>
</html>

<script type="text/javascript">

    function createmarkerp() {
        marker = new BMap.Marker(new BMap.Point('{$lng}','{$lat}'));// 创建标注
        map.addOverlay(marker);             // 将标注添加到地图中
        marker.enableDragging();
        mpoint = marker.getPosition();
        mapcenter(mpoint.lng, mpoint.lat);
        
        marker.addEventListener("dragend", function(){    
        	 var c=marker.getPosition();
        	 local(c.lng,c.lat);
        });
    }
    function createmarker(){
        marker = new BMap.Marker(map.getCenter());// 创建标注
        map.addOverlay(marker);             // 将标注添加到地图中
        
   
        
        marker.enableDragging();
        map.centerAndZoom(marker.getPosition(),18);
        if($("#txtmapsearch").val()!=""){
            mapsearch();
        }else{
	        var c=map.getCenter();
	        local(c.lng,c.lat);
        }
        
        marker.addEventListener("dragend", function(){    
       	 var c=marker.getPosition();
       	 local(c.lng,c.lat);
       });
    }
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        window.setTimeout(createmarker,1000);
    }

    var geoc = new BMap.Geocoder();
    function mapsearch(){
        if($("#txtmapsearch").val()==''){
            alert("请输入关键字");
            $("#txtmapsearch").focus();
            return;
        }
        var options = {
            onSearchComplete: function(results){
                // 判断状态是否正确
                if (local.getStatus() == BMAP_STATUS_SUCCESS){
                    var s = [];
                    flag=false;
                    for (var i = 0; i < results.getCurrentNumPois(); i ++){
                        if(!flag){
                            searchselect(results.getPoi(i).point.lng,results.getPoi(i).point.lat);
                        }
                        s.push("<a class='mapli' onclick=searchselect('"+results.getPoi(i).point.lng+"','"+results.getPoi(i).point.lat+"','"+results.getPoi(i).title+"','"+results.getPoi(i).address+"')> "+results.getPoi(i).title + ", " + results.getPoi(i).address+"</a>");
                    }
                    document.getElementById("r-result").innerHTML = s.join("<hr/>");
                    $("#r-result").width(280).show();
                    winresize();
                }
            }
        };
        var local = new BMap.LocalSearch(map, options);
        local.search($("#txtmapsearch").val());
    }
    function searchselect(lng,lat,title,address){
        if(ispoint(lng , lat)) {
            markertitle = title;
            markeraddress = address;
            marker.setPosition(new BMap.Point(lng, lat));
            mpoint = marker.getPosition();
            mapcenter(mpoint.lng, mpoint.lat);
            
	        local(mpoint.lng,mpoint.lat);
        }
    }
    function showInfo(e){
        if(ispoint(e.point.lng , e.point.lat)) {
            marker.setPosition(e.point);
            
            local(e.point.lng,e.point.lat);
        }
    }

    function mapcenter(lng, lat) {
        map.centerAndZoom(new BMap.Point(lng, lat), map.getZoom());
    }
    function ispoint(h_lng, h_lat) {
        if (h_lng != undefined && h_lng != null && h_lng != "" && h_lng != "0" && h_lat != undefined && h_lat != null && h_lat != "" && h_lat != "0"&&parseInt(h_lng)>0&&parseInt(h_lat)>0) {
            return true;
        }
        return false;
    }
    function markerposition(){
        if(marker==null){
            alert('定位中');
        }
        else{
            mpoint=marker.getPosition();
            mapcenter(mpoint.lng,mpoint.lat);
        }
    }
    function markerselect(){
        mpoint=marker.getPosition();
        /*geoc.getLocation(mpoint, function(rs){
         var addComp = rs.addressComponents;
         alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
         });*/
        //alert(mpoint.lng);
        //alert(mpoint.lat)
      
        var t=$("#txtmapresult").val();
        if(t==undefined||t==null){
        	t=""
        }

        {$ret}(mpoint.lng,mpoint.lat,t);
    }
    function winresize() {
        $("#allmap").height($(window).height() - $("#tabtop").height());
        $("#allmap").width($(window).width() - $("#r-result").width());
    }

    function local(lat,lng){
    	 var url="http://api.map.baidu.com/geocoder/v2/?ak=kkA94xvGPjnprY92WU4yYME8&callback=JSON_CALLBACK&location="+lng+","+lat+"&output=json&pois=1";
         
         $.ajax({
             type: "GET",
             url: url,
             data: {},
             dataType: "jsonp",
             success: function(data){
                   var a=data.result.addressComponent; 
                   var addr=a.city+a.district+a.street;
                   if(data.result.pois!=undefined&&data.result.pois!=null&&data.result.pois!=""&&data.result.pois.length>0){
                	   addr=data.result.pois[0].addr;
                   }
                   
                 
                   
                   $("#txtmapresult").val(addr);
             }
         });
    }
    
    // 百度地图API功能
    //    alert('<?php //echo $_GET['id'] ?>//');
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom();
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));// 左上角，添加比例尺
    map.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件
    var marker=null;
    var markertitle="";
    var markeraddress="";
    map.addEventListener("click", showInfo);
    if(ispoint('{$lng}','{$lat}'))
    {
        map.centerAndZoom(new BMap.Point('{$lng}','{$lat}'),18);
        
        window.setTimeout(createmarkerp,1000);
        
        local({$lng},{$lat});
    }
    else{
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);

        
    }
    
    $(function () {
        try {
            winresize();
            $(window).resize(function () {
                winresize();
            });
            
            
        }
        catch (e) {
            console.log(e);
        }
    });
</script>

